<template>
	<view class="uni-page">
		<cu-custom :isBack="true">
			<block class="bar-font" slot="backText">设备配网</block>
		</cu-custom>
		<view class="page-main">
			<u-steps :list="numList" mode="number" :current="0"></u-steps>
			<view class="main-box">
				<view class="title">填写家庭Wi-Fi</view>
				<view class="des">此设备仅支持2.4G Wi-Fi连接使用</view>
				<view class="des" style="margin-bottom: 20rpx;">Wi-Fi名称仅支持英文字符及数字</view>
				<!-- <view class="kapian">
					仅支持2.4Gwifi网络
				</view> -->
				<u-form
					:label-style="{
						fontSize: '30rpx',
						paddingRight: '10rpx'
					}"
					class="user-form">
					<u-form-item left-icon="wifi" :left-icon-style="{ fontSize: '34rpx' }">
						<!-- <u-icon name="wifi" class="icons"></u-icon> -->
						<u-input v-model="form.name" placeholder="请输入Wi-Fi名称" />
					</u-form-item>
					<u-form-item left-icon="lock-fill" :left-icon-style="{ fontSize: '34rpx' }">
						<!-- <u-icon name="lock-fill" class="icons"></u-icon> -->
						<u-input v-model="form.pwd" @change="inoutchange" placeholder="请输入Wi-Fi密码" />
					</u-form-item>
					<view class="formsubmit">
						<u-button type="primary" shape="circle" :disabled="jinyongs" @click="btnqueren">确认</u-button>
					</view>
				</u-form>
			</view>
		</view>
		<u-modal v-model="show" :content="content"></u-modal>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	const errEnum = {
		12000: '未先调用 startWifi 接口',
		12001: '当前系统不支持相关能力',
		12002: '密码错误',
		12003: '连接超时, 仅 Android 支持',
		12004: '重复连接 Wi-Fi',
		12005: 'Android 特有，未打开 Wi-Fi 开关',
		12006: 'Android 特有，未打开 GPS 定位开关',
		12007: '用户拒绝授权链接 Wi-Fi',
		12008: '无效 SSID',
		12009: '系统运营商配置拒绝连接 Wi-Fi',
		12010: '系统其他错误，需要在 errmsg 打印具体的错误原因',
		12011: '应用在后台无法配置 Wi-Fi',
		12013: '系统保存的 Wi-Fi 配置过期，建议忘记 Wi-Fi 后重试，仅 Android 支持',
		12014: 'iOS 特有，无效的 WEP / WPA 密码'
	}
	export default {
		data() {
			return {
				numList: [{
					name: '配置硬件设备'
				}, {
					name: '设置家庭WiFi'
				}, {
					name: '开始配网'
				}],
				form: {
					name: '',
					result: '',
					pwd: ''
				},
				show: false,
				content: '请在权限管理器中确认APP是否允许【位置信息】',
				jinyongs: false,
				globalData: {
					userInfo: {}
				},
				mac: null
			}
		},
		onLoad(options) {
			// 先检查环境，并注册监听
			if (options.mac) {
				this.mac = options.mac
			}
		},
		onShow() {
			const $t = this
			wx.startWifi({
			  success (res) {
				$t.getWifi();
				$t.onWifiConnected();
				$t.onNetworkStatusChange();
			  },
			  fail: (err => {
				  if (err.errCode && err.errCode == 12005) {
					uni.showModal({
						content: '请先打开手机 Wi-Fi 开关',
						showCancel: false
					});
				  } else {
					  let errMsg = ''
					  if (!err.errCode) {
					  	errMsg = err.errMsg
					  } else {
					  	errMsg = errEnum[err.errCode]
					  }
					  uni.showModal({
					  	content: err.errMsg,
					  	showCancel: false
					  });
				  }
			  })
			})
		},
		onHide() {
			uni.offNetworkStatusChange()
			wx.offWifiConnected()
			uni.stopWifi()
		},
		methods: {
			getLocationFn() {
				const _this = this
				uni.getLocation({
					type: 'gcj02', // <map> 组件默认为国测局坐标gcj02
					altitude: true,
					success(res) {
						console.log('返回的位置信息', res, _this)
						_this.globalData.userInfo = {
							latitude: res.latitude,
							longitude: res.longitude
						}
					}
				})
			},
			getWifi() {
				const $t = this
				uni.getConnectedWifi({
					success(res) {
						if (res.wifi.SSID === '' || res.wifi.SSID.contains('unknown ssid')) {
							// uni.showToast({
							// 	title: '获取wifi信息失败，请手动填写WiFi名称',
							// 	icon: 'none'
							// })
							return
						}
						$t.form.name = res.wifi.SSID
						$t.jinyongs = false
					},
					fail(err) {
						console.log('error', err)
						let errMsg = ''
						if (!err.errCode) {
							errMsg = err.errMsg
						} else {							
							errMsg = errEnum[err.errCode]
							if (err.errCode == 12005) {
								uni.showModal({
									content: '未打开 Wi-Fi 开关',
									showCancel: false
								});
							}
						}
					}
				})
			},
			onWifiConnected() {
				const $t = this
				uni.onWifiConnected(res => {
					if (res.wifi.SSID === '' || res.wifi.SSID.contains('unknown ssid')) {
						// uni.showToast({
						// 	title: '获取wifi信息失败，请手动填写WiFi名称',
						// 	icon: 'none'
						// })
						return
					}
					$t.form.name = res.wifi.SSID
					$t.jinyongs = false
					uni.showToast({
						title: '已连接Wi-Fi网络',
						icon: 'none'
					})
				})
			},
			onNetworkStatusChange() {
				let this_ = this;
				uni.onNetworkStatusChange(function(res) {
					console.log(res);
					if (res.networkType !== 'wifi') {
						this_.content = '当前非Wi-Fi网络'
						this_.show = true;
						// this_.jinyongs = true;
					} else {
						// this_.getWifi()
					}
				})
			},
			inoutchange() {
				console.log(123123)
			},
			btnqueren() {
				console.log(this.form)
				//const re = /.*[/u4e00-/u9fa5]+.*$/;
				if (this.form.name == '' || this.form.pwd == '') {
					// this.$refs.uTips.show({
					// 	title: '请输入正确的Wi-Fi名称密码，Wi-Fi名称不能为中文',
					// 	type: 'error',
					// 	duration: '2300'
					// })
					uni.showToast({
						title: '请输入正确的Wi-Fi名称密码，Wi-Fi名称不能为中文',
						icon: 'none'
					})
				} else {
					uni.navigateTo({
						url: `../interlinkage/interlinkage?wifiName=${this.form.name}&pwd=${this.form.pwd}&mac=${this.mac}`
					});
			
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.uni-page {
		height: 100vh;
		background-color: #FFFFFF;
	}
	.page-main {
		padding-top: 40rpx;
		.main-box {
			padding: 60rpx 40rpx 0;
		}
		.title {
			font-size: 34rpx;
			font-weight: 600;
			padding-bottom: 8rpx;
			padding-left: 6rpx;
		}
		.des {
			color: $u-content-color;
			padding-left: 6rpx;
		}
	}
	.kapian {
		width: 140px;
		height: 30px;
		color: #FFFFFF;
		background: #F0AD4E;
		text-align: center;
		line-height: 30px;
		border-radius: 15px;
	}

	.icons {
		padding: 10px;
		padding-left: 30px;
	}

	.formsubmit {
		margin: 100rpx 20rpx 0;
	}

	.images_div {
		width: 200px;
		height: 200px;
		margin: 0 auto;
	}
</style>
<style>
	.user-form .u-form-item {
		padding: 16rpx 20rpx !important;
	}
</style>
